<style type="text/css">
    /* 去掉默认样式，设置新的样式 */
    #s11,#s22{
        display:block;
        width:100%;
        height:100%;
        box-sizing:border-box;
        background:none;
        border:1px solid #b0c5e2;
        outline:none;
        -webkit-appearance:none;
        padding:0 5px;
        line-height:inherit;
        color:inherit;
        cursor:default;
        font-size:14px;
        position:relative;
        z-index:3;
        margin-top:10px;
    }
    #s11 option,,#s22 option{
        color:#222;
    }
    #s11 option:hover,#s22 option:hover{
        color:#fff;
        background: #8d9294;
    }
    #s11 option:checked,,#s22 option:checked{
        background:#535353;
        color:#fff;
    }
    .layui-layer-btn0{
        display: none;
    }


</style>
<div style="float:left;width:170px;margin-right:20px;height:250px;">
    <span>待添规则</span><br/>
<select multiple="multiple" size="6" class="w2selectm1" id="s11" style="border-radius:0;" >
    <?php foreach ($data['avaliable'] as $ava){?>
        <option value="<?=$ava?>"><?=$ava?></option>
    <?php }?>
</select>
</div>
<div style="width:80px;height:150px;float:left;font-size:0.75em;color:#666;margin-top: 100px;">
    <input id="b11" value="&gt;&gt;" type="button" style="width:60px"/>
    <br/><br/>
    <input id="b33" value="&lt;&lt;" type="button" style="width:60px">
</div>

    <span>已有规则</span><br/>
<select multiple="multiple" size="6" class="w2selectm2" id="s22" style="height:250px;width:170px;border-radius:0;">
    <?php foreach ($data['assigned'] as $ava){?>
        <option value="<?=$ava?>"><?=$ava?></option>
    <?php }?>
</select>
<div style="font-size: 10px;color: #acb2bf;padding-top: 5px;">多规则约束的时候，只要一个规则满足就会可以访问，需要斟酌添加</div>
<?php
$url_rule = \common\components\helpers\Fun::url(['role/assignrule']);
$jss = <<<JS
    $('.layui-layer-btn0', parent.document).hide();
    $('.layui-layer-btn1', parent.document).text('关闭')
    $('#b11').click(function(){
        var obj = $('#s11 option:selected').clone(true);
        if(obj.size() == 0)    {alert("请至少选择一条!");}
        else{
            
            //进行规则在后台的添加
            obj.each(
                function(){
                    var rule_name = $(this).val();
                    $.ajax({  
                         type : "post",  
                         url : "$url_rule",  
                         data : {rule_permission:rule_name,ajax:'addrulepermission',role_name:"$role_name"},   
                         async: false,
                         success : function(data){
                             alert(data.content);
                             
                         },
                         error:function(data){
                              alert(JSON.stringify(data));
                          }
                  });
                }
            );
            
            if($("#s22 option").length==0)
            {
                $('#s22').append(obj);
            }
            else{
                for(var i=0;i<$("#s22 option").length;i++)

                {
                    var option=document.getElementById("s22").options[i].value;
                    if(obj.val()==option)
                    {alert("已添加过！");
                        return false;
                    }
                }

                $('#s22').append(obj);

            }
        }
        $('#s11 option:selected').remove();
    });

    $('#b33').click(function(){
        obj = $('#s22 option:selected').clone(true);
        if(obj.size() == 0){
            alert("请至少选择一条!");
        }else{
            //进行规则在后台的移除
            obj.each(
                function(){
                    var rule_name = $(this).val();
                    $.ajax({  
                         type : "post",  
                         url : "$url_rule",  
                         data : {rule_permission:rule_name,ajax:'removerulepermission',role_name:"$role_name"},   
                         async: false,
                         success : function(data){
                             alert(data.content);
                         },
                         error:function(data){
                              alert(JSON.stringify(data));
                          }
                  });
                }
            );
            
        if($("#s11 option").length==0)
            {
                $('#s11').append(obj);
            }
            else{

                $('#s11').append(obj);

            }
        }
        $('#s22 option:selected').remove();
    });
JS;
$this->registerJS($jss);
?>

